<template>
	<view class="container">
		<!-- 头部背景色 -->
		<view class="header-bg"></view>
		<!-- title -->
		<view class="header-box">告警管理</view>
		<!-- 告警信息统计 -->
		<view class="statistics-box">
			<view :class="['statistics-item', curStatisticsType == item.type ? 'select-type':'']" v-for="(item, index) in statisticsList" :key="index" @click="showTypeList(item)">
				<view class="statistics-item-name">{{ item.name }}</view>
				<view class="statistics-item-num">{{ item.num }}</view>
			</view>
		</view>
		<!-- 告警列表 -->
		<view class="device-box">
			<scroll-view :scroll-y="true" :lower-threshold="200" @scrolltolower="scrolltolower" class="scroll-Y">
				<view class="alarm-list" v-if="alarmList.length || loadingStatus == 'loading'">
					<view class="alarm-item" v-for="(item, index) in alarmList" :key="item.id">
						<view class="alarm-item-content" @click="goDetail(item)">
							<view class="alarm-title">
								<view class="alarm-type">{{ alarmType[item.type] }}</view>
								<view class="title-text">{{ item.location }}</view>
							</view>
							<view class="ip-time">
								<view class="ip">{{ item.ip }}</view>
								<view class="date-time">{{ item.createTime }}</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="loadingStatus"></uni-load-more>
				</view>
				<view v-else class="empty-box">
					<image class="empty-img" src="../../static/images/index/empty.png" mode="widthFix"></image>
					暂无数据
				</view>
			</scroll-view>
		</view>
		<!-- 底部tabbar -->
		<custom-tabbar :activeIndex="3"></custom-tabbar>
	</view>
</template>

<script setup>
import { reactive, toRefs, onMounted } from 'vue';
import { onPullDownRefresh } from '@dcloudio/uni-app';
import { getAlertCount, listAlert } from '@/service/alarm.js';
import { getDicts } from '@/service/common.js';

// 懒加载图片
const getImageUrl = (name) => {
	return `../../static/images/index/${name}.png`;
};

const state = reactive({
	curStatisticsType: -1,//当前选中统计类型
	statisticsList: [
		{
			name: '全部',
			num: 0,
			type: -1
		},
		{
			name: '未处理',
			num: 0,
			type: 1
		},
		{
			name: '已处理',
			num: 0,
			type: 2
		}
	],
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		total: 0
	},
	alarmType: {},
	alarmList: [],
	loadingStatus: 'more'
});
const { curStatisticsType, statisticsList, alarmType, alarmList, loadingStatus } = toRefs(state);

//下拉刷新
onPullDownRefresh(() => {
	resetList();
});

onMounted(() => {
	getAlarmStatistics();
	getDictList();
	getList();
});

//获取不同告警类型数量
const getAlarmStatistics = () => {
	getAlertCount().then((res) => {
		state.statisticsList[0].num = res.allCount ? res.allCount : 0;
		state.statisticsList[1].num = res.notProcessedCount ? res.notProcessedCount : 0;
		state.statisticsList[2].num = res.processedCount ? res.processedCount : 0;
	});
};

//切换不同告警类型列表
const showTypeList = (row) => {
	state.curStatisticsType = row.type
	resetList()
}

//重置
const resetList = () => {
	state.queryParams = {
		pageNum: 1,
		pageSize: 10,
		total: 0
	};
	state.alarmList = [];
	getList();
};

// 滚动条触底事件
const scrolltolower = (e) => {
	if (state.loadingStatus == 'more') {
		state.queryParams.pageNum += 1;
		getList();
	}
};

//获取字典，告警类型
const getDictList = () => {
	getDicts('gj_type').then((resp) => {
		state.alarmType = {};
		resp.data.forEach((p) => {
			state.alarmType[p.dictValue] = p.dictLabel;
		});
	});
};

//获取列表
const getList = () => {
	state.loadingStatus = 'loading';
	const params = {...state.queryParams}
	if(state.curStatisticsType!=-1){
		params.status = state.curStatisticsType
	}
	listAlert(params).then((res) => {
		res.rows.forEach((item) => {
			item.location = handleLocation(item);
		});
		state.alarmList = state.alarmList.concat(res.rows);
		state.queryParams.total = res.total;
		state.loadingStatus = res.total > state.alarmList.length ? 'more' : 'noMore';
		uni.stopPullDownRefresh();
	});
};

//处理位置信息
const handleLocation = (row) => {
	let location = row.locationList.map((item) => item.name);
	row.deviceRackName ? location.push(row.deviceRackName) : '';
	let unoIndexList = row.deviceRackUnoIndex ? row.deviceRackUnoIndex.split(',') : [];
	if (Array.isArray(unoIndexList) && unoIndexList.length) {
		if (unoIndexList.length > 1) {
			location.push(`${unoIndexList[0]}-${unoIndexList[unoIndexList.length - 1]}U`);
		} else {
			location.push(`${unoIndexList[0]}U`);
		}
	}
	return location.join(' / ');
};

//跳转详情
const goDetail = (row) => {
	console.log(row);
};
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	padding: 48rpx 30rpx 0;
	position: relative;
	.header-bg {
		width: 100%;
		height: 255rpx;
		background: linear-gradient(180deg, #ffb6a6 0%, #ffffff 100%);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	.header-box {
		width: 100%;
		height: 41rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #020217;
		line-height: 41rpx;
		position: relative;
		z-index: 10;
	}
	.statistics-box {
		box-sizing: border-box;
		width: 100%;
		height: 37rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 33rpx 0 23rpx;
		position: relative;
		z-index: 1;
		.statistics-item {
			display: flex;
			align-items: center;
			.statistics-item-name {
				font-size: 23rpx;
				color: #767e94;
				margin-right: 20rpx;
			}
			.statistics-item-num {
				font-size: 23rpx;
				font-weight: bold;
				color: #020217;
			}
		}
		.select-type{
			.statistics-item-name {
				color: #37373a;
				font-weight: bold;
			}
		}
	}
	.device-box {
		width: 100%;
		height: calc(100% - 181rpx);
		overflow: hidden;
		position: relative;
		z-index: 1;
		.scroll-Y {
			height: 100%;
		}
		.alarm-list {
			box-sizing: border-box;
			width: 100%;
			padding: 0 0 190rpx;
			.alarm-item {
				box-sizing: border-box;
				width: 100%;
				// height: 120rpx;
				background: #f9fbfd;
				box-shadow: 0rpx 4rpx 4rpx 0rpx #dbdee6;
				padding: 20rpx;
				margin-bottom: 19rpx;
				.alarm-item-content {
					box-sizing: border-box;
					width: 100%;
					.alarm-title {
						// height: 40rpx;
						position: relative;
						.alarm-type {
							box-sizing: border-box;
							height: 32rpx;
							background: linear-gradient(180deg, #f24103 0%, #f50006 100%);
							box-shadow: inset 0rpx 0rpx 30rpx 0rpx rgba(255, 29, 60, 0.4);
							border-radius: 3rpx;
							border: 2rpx solid rgba(255, 137, 122, 0.88);
							margin-right: 13rpx;
							font-size: 22rpx;
							color: #ffffff;
							text-align: center;
							line-height: 28rpx;
							padding: 0 9rpx;
							float: left;
							shape-outside: margin-box;
						}
						.title-text {
							font-size: 25rpx;
							font-weight: bold;
							color: #262d37;
							// overflow: hidden;
							// text-overflow: ellipsis;
							// white-space: nowrap;
						}
					}
					.ip-time {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 15rpx;
						.ip {
							font-size: 22rpx;
							color: #262d37;
						}
						.date-time {
							font-size: 22rpx;
							color: #262d37;
						}
					}
				}
			}
		}
		.empty-box {
			box-sizing: border-box;
			width: 100%;
			height: calc(100% - 7.27vh);
			padding-bottom: 10vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 3.125vw;
			color: #808994;
			.empty-img {
				display: block;
				width: 17.875vw;
				margin-bottom: 2.7vh;
			}
		}
	}
}
</style>
